import { Component } from "react"

class Child extends Component {
  componentDidUpdate() {
    console.log('3   子组件的更新componentDidUpdate');
  }
  render() {
    console.log('2   子组件的更新render');
    return (
      <h4>我是子组件</h4>
    )
  }
}
// vue2的父子组件的生命周期函数的执行顺序
// 父组件3  b - c -bm   ---> 子4个 ---> 父组件的mounted
class Header extends Component {
  state = {
    count: 0
  }
  updateCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  componentDidUpdate() {
    console.log('4   父组件的更新结束componentDidUpdate');
  }
  render() {
    console.log('1  父组件的更新render');
    return (
      <>
        <Child />
        <h3>测试类组件的生命周期函数--- {this.state.count}</h3>
        <button onClick={this.updateCount}>修改count</button>
      </>
    )
  }
}

function App() {
  return (
    <>
      <Header />
    </>
  )
}

export default App